<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shopping Cart</title>
<style type="text/css">
@import "dijit/themes/tundra/tundra.css";

.target {
	border: 2px dotted gray;
	width: 200px;
	height: 350px;
	background-color: pink;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
	overflow: auto
}

.source {
	height: 400px;
	width: 270px;
	background-color: ivory;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.itemtable {
	border: 1px solid gray;
	text-align: left;
	background-color: rgb(153, 255, 255);
	width: 250px;
	font-size: 12px;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.avatartable {
	border: 1px dotted gray;
	text-align: left;
	background-color: rgb(153, 255, 255);
	width: 150px;
	font-size: 10px;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.avatartable img {
	width: 25px;
	height: 25px
}

.targettable {
	border: 1px dotted gray;
	text-align: left;
	background-color: ivory;
	width: 150px;
	font-size: 10px;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.targettable img {
	width: 25px;
	height: 25px
}

.rating {
	color: green;
	font-family: Serif;
	font-size: 14px;
}

.dojoDndItemOver {
	background: skyblue;
	border: 1px dotted gray;
}

.dojoDndItemBefore {
	border-top: 2px dotted black;
}

.dojoDndItemAfter {
	border-bottom: 2px dotted black;
}

.target .dojoDndItemAnchor {
	border: 1px solid black;
}

.dojoDndAvatar {
	font-size: 75%;
	color: black;
}

.dojoDndAvatar td {
	padding-left: 20px;
	padding-right: 4px;
	height: 20px
}

.dojoDndAvatarHeader {
	background: #ccc;
	background-repeat: no-repeat;
}

.dojoDndAvatarItem {
	background: #eee;
}

</style>
<script type="text/javascript" src="http://192.168.1.175/dojo/dojo.js"
	djConfig="parseOnLoad: true, isDebug: false, usePlainJson: true"></script>
<script type="text/javascript">
	dojo.require("dojo.dnd.Source");
	dojo.require("dijit.Dialog");
	dojo.require("dojo.parser");
	dojo.require("dijit.form.Button");
	var all_nodes, c1, c2; //Retrives list of all items in the shop from server.
	function GetAllItems(){
		dojo.xhrGet( {	
			url: "http://leoner.tianji.com/jersey-test/jsp/fn/data2.txt",	
			handleAs: "json",		
			load: function(responseObject, ioArgs) {
				alert(responseObject);
			all_nodes = responseObject;			
			c1.selectAll();			
			c1.deleteSelectedNodes();			
			c1.clearItems();			
			c1.insertNodes(false, all_nodes.items);		
			
			dijit.byId('dialog1').hide();
			}			
			})} 
		//Sends all items in the shopping cart back to server for saving
		function SaveCartItems(){		
			dijit.byId('dialog1').show(); 
			//Show busy dialog box		
			var x = c2.getAllNodes();		
			var y = JsToJson(x); 
			//Get JSON for cart items		
			var kw = {			
				url: "http://192.168.1.175/jersey-test/jsp/fn/data2.txt",			
				content: {"cart_data":y},			
				load: function(responseObject, ioArgs) {
					dijit.byId('dialog1').hide();
				}				
			}		
			dojo.xhrPost(kw); 
		}
		  //Fetches all the cart items saved by user before logging out , the last time.
		  function GetCartItems(){		
		  	dojo.xhrGet( {	
				url: "http://192.168.1.175/jersey-test/jsp/fn/data2.txt",			
				handleAs: "json",			
				load: function(responseObject, ioArgs) {				
					nodes = responseObject;				
					c2.selectAll();				
					c2.deleteSelectedNodes();				
					c2.clearItems();				
					c2.insertNodes(false, nodes.items);		
					c2.copyState = function(){
						return false;
					}
					
					return responseObject;}				
			})}  
				//Sends a reset message to server. Used for clearing last saved state in session.
			function Reset(){		
				dijit.byId('dialog1').show();		
				c2.selectAll();		
				c2.deleteSelectedNodes();		
				c2.clearItems(); 		
				dojo.xhrGet( 
					{			
						url: "http://192.168.1.175/jersey-test/jsp/fn/data.txt",			
						handleAs: "json",			
						load: function(responseObject, ioArgs) {
							dijit.byId('dialog1').hide();}				
					}) 
			  }
			//Node creator function. Used to create UI for individual shop itemvar 
			var node_creator = function(data, hint){	
			console.log("===========node_creator----"+hint);
				var types = [];	
				var node = dojo.doc.createElement("div");	
				types.push("cartitem"); 	
				var html;	
				if(hint !='avatar')	{			
					html = "<table class='itemtable' cellpadding='2' cellspacing='0'>" ;		
					html += "<tbody><tr><td width='50px'>" ;		
					html+= "<img src='"+data.img_url+"'/><br/>";		
					html += "</td><td><b>";		
					html+= data.name+"</b><br/>$";		
					html += data.price+"<br/>";		
					html+= data.description+"<br/>";		
					html += GetRatingHTML(data.rating)+"<br/></td></tr></tbody></table>";	
				}	else	{	
					html = "<table class='avatartable' cellpadding='2' cellspacing='0'>" ;		
					html += "<tbody><tr><td width='50px'>" ;		
					html+= "<img src='"+data.img_url+"'/><br\/>";		
					html += "</td><td>";		
					html+= data.name+"<br/>$";		
					html += data.price+"<br/></td></tr></tbody></table>";	
				}	
				node.innerHTML = html; 
				node.id = dojo.dnd.getUniqueId();	
				return {node: node, data: data, type: types};
			}; 
				
			var new_node_creator = function(data, hint){	
			console.log("===========new_node_creator----"+hint+"=="+data);
			console.log(data);
				
				var types = [];	
				var node = dojo.doc.createElement("div");	
				types.push("cartitem"); 	
				var html;	
				if(hint !='avatar')	{			
					html = "<table class='itemtable' cellpadding='2' cellspacing='0'>" ;		
					html += "<tbody><tr><td width='50px'>" ;		
					html+= "<img src='"+data.img_url+"'/><br/>";		
					html += "</td><td><b>";		
					html+= data.name+"</b><br/>$";		
					html += data.price+"<br/>";		
					html+= data.description+"<br/>";		
					html += GetRatingHTML(data.rating)+"<br/></td></tr></tbody></table>";	
				}	else	{	
					html = "<table class='avatartable' cellpadding='2' cellspacing='0'>" ;		
					html += "<tbody><tr><td width='50px'>" ;		
					html+= "<img src='"+data.img_url+"'/><br\/>";		
					html += "</td><td>";		
					html+= data.name+"<br/>$";		
					html += data.price+"<br/></td></tr></tbody></table>";	
				}	
				node.innerHTML = html; 
				node.id = dojo.dnd.getUniqueId();	
				return {node: node, data: data, type: types};
			}
			//Node creator function used to create UI for shopping cart items.
		var targetnode_creator = function(data, hint){	
		
				console.log("===========targetnode_creator");
				var types = [];
				types.push('cartitem');
				var node = dojo.doc.createElement("div");	
				dojo.addClass(node,"targettable");	
				var html;	
				html = "<table cellpadding='2' cellspacing='0'>" ;	
				html += "<tbody><tr><td width='50px'>" ;	
				html+= "<img src='"+data.img_url+"'/><br\>";	
				html += "</td><td>";	
				html+= data.name+"<br/></td><td align=right>$";	
				html += data.price+"</td></tr></tbody></table>";	
				node.innerHTML = html;	
				node.id = dojo.dnd.getUniqueId();	
				return {node: node, data: data, type: types};}; 
		 //Initializer function, called on body.onloadvar 
		var init = function(){ 	
		 	dijit.byId('dialog1').show();   	
			c1 = new dojo.dnd.Source("c1", {creator: node_creator,accept: ["item"],copyOnly: false});   	
			c2 = new dojo.dnd.Source("c2", { creator: targetnode_creator ,accept: ["cartitem"],copyOnly: false});   	
			GetCartItems();   
			GetAllItems(); 
			
		}; 
		//Returns HTML for showing rating based on numeric value
		function GetRatingHTML(rat){
			x = "<span class='rating'>";	
			for(i =0;i<rat;i++)	
				x += "* ";	
			x+="</span>";	
			return x;
		} 
		//Accepts a collection of items, and returns JSON text for the same.
		function JsToJson(items){	
			var y = "{'items': [";
			var n;	for(i =0;i<items.length;i++)	{ 
				var jsnode = c2.getItem(items[i].id);   		
				y+= DataToJson(jsnode.data);	
			}	
			if(y[y.length-1] == ",")
				y = y.substring(0,y.length-1);
			y += "]}";	
			return y;
			} // Returns JSON fragment for a single item.
		function DataToJson(data){
			var x= "{'id':"+"'"+data.id+"',";
			x += "'name':"+"'"+data.name+"',";
			x += "'price':"+"'"+data.price+"',";
			x += "'rating':"+"'"+data.rating+"',";
			x += "'description':"+"'"+data.description+"',";
			x += "'img_url':"+"'"+data.img_url+"'},";
			return x; 
		}  
			dojo.addOnLoad(init);
</script>
</head>
<body style="font-size: 12px;" class="tundra">
<table width="70%">
	<tr>
		<td>
		<h1>Dojo Shopping Cart</h1>
		Simply drag items and drop it on your shopping cart. To add a item
		more than once, drag it from the shopping cart , holding the CTRL key
		and drop it on the cart.</td>
		<td align="right">
		<button dojoType="dijit.form.Button" onclick="SaveCartItems();">Save</button>
		<button dojoType="dijit.form.Button"
			onclick="window.location ='logout.html';">Logout</button>
		<button dojoType="dijit.form.Button" onclick="Reset();">Reset</button>
		</td>
	</tr>
</table>
<br />
<hr width="80%" align="left">
<table width="80%">
	<tr>
		<td>Todays Special</td>
		<td>Your Shopping Cart</td>
	</tr>
	<tr valign="top">
		<td width="70%" align="left">
		<div id="c1" class="source"></div>
		</td>
		<td width="30%" align="left">
		<div id="c2" class="target"></div>
		</td>
	</tr>
</table>
<div dojoType="dijit.Dialog" id="dialog1" title="Processing"
	style="width: 200px; background-color: gray">Please Wait ....</div>
</body>
</html>
